<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>登录界面</title>
	<script src="/bootstrap3/jquery-3.6.3.js"></script>
	<script src="/bootstrap3/js/bootstrap.min.js"></script>
	<link href="/bootstrap3/css/bootstrap.min.css" rel="stylesheet" />
	<link href="/layui-v2.7.6/layui/css/layui.css" rel="stylesheet" />
	<script src="/cocoMessage.js"></script>
	<!-- 自定义的js文件 -->
	<script src="/log.js"></script>
	<style>
		body {
			margin: 0px;
			padding: 0px;
		}

		.search {
			margin-top: 1%;
		}

		#serachBtn {
			margin-left: -12px;
		}

		.bigDiv {
			width: 50%;
			height: 450px;
			margin-top: 6%;
			background-color: rgba(255, 255, 255, 0.5);
			box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.8);
			border-radius: 1%;
		}

		.modalcss {
			background-color: #E3EDCD;
			width: 440px;
			height: 450px;
			margin: 13% 13%
		}

		.tishiParent {
			position: relative;
		}

		.tishiSun {
			position: absolute;
		}
	</style>
</head>
<body style="background-color: #E3EDCD;">
<div class="row">
	<div class="form-group">
		<div class="col-sm-3 col-sm-offset-8 search">
					<span class="col-sm-10"><input type="text" class="form-control layui-icon-search"
												   placeholder="请输入搜索内容" style="background-color: rgba(255, 255, 255, 0.3)" /></span>
			<button id="serachBtn" type="button" class="btn  layui-btn-normal col-sm-2"><small
					style="color:white;">搜索</small></button>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-sm-6 bigDiv col-sm-offset-3 text-center">
		<div class="col-sm-6  padding-top: 50px; " style="background-color:lightgray; height: 100%;">
			<h2 class="text-center" style="background-color:lightgray; padding-top: 80px; padding-bottom: 5px;">
				<strong>苗药管理系统</strong>
			</h2>
			<div>
				<hr>
				<img src="img/m.jpg" style="width: 100%;" />
				<hr />
			</div>
		</div>
		<div class="col-sm-6">
			<form class="form-horizontal  " role="form">
				<h2 class="text-center text-primary" style="padding-bottom: 20px; padding-top:80px">
					<strong>欢迎登录</strong>
				</h2>
				<div class="form-group">
					<div class="col-sm-8 col-sm-offset-2" style="position: relative">
						<input type="text" class="form-control" id="username" name="userName" placeholder="用户名">
						<p id="una" style="height: 13.6px; position:absolute;"></p>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-8 col-sm-offset-2" style="position: relative">
						<input type="password" class="form-control" id="password" name="password"
							   placeholder="密码">
						<p id="up" style="height: 13.6px; position:absolute;"></p>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-sm-5 col-sm-offset-2">
						<input type="text" class="form-control" id="Captcha" placeholder="验证码" />
					</div>
					<div class="col-sm-3 " style="margin-left: -14px;"><canvas id="canvas" width="100" height="35" style="margin-left:-15px;background-color: #00F7DE;"></canvas></div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-8" style="margin-bottom: 10px;">
						<button type="button" class="btn btn-block login btn-primary " id="login">登录</button>
					</div>
				</div>
				<div class="text-center">
					<p>没有账号？<a href="#" data-toggle="modal" data-target="#myModal">
						<font color="red">点击注册</font>
					</a></p>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- 定义一个模态框-->
<div class="modal fade text-primary" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
	 aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content  modalcss">
			<div class="modal-header">
				<h2 class="modal-title text-center"><strong>用户注册</strong></h2>
			</div>
			<div class="modal-body" style="background-color: white;">
				<form class="form-horizontal">
					<div class="form-group">
						<div class="col-sm-8 col-sm-offset-2 tishiParent">
							<input type="text" class="form-control" id="uname" name="uName" placeholder="用户名" />
							<p id="pUname" class="tishiSun"></p>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-8 col-sm-offset-2 tishiParent">
							<input type="text" class="form-control" id="pwd" name="uPwd" placeholder="密码" />
							<p id="pPwd" class="tishiSun"></p>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-8 col-sm-offset-2 tishiParent">
							<input type="text" class="form-control" id="ConfirmPwd" name="ConfirmPwd"
								   placeholder="确认密码" />
							<p id="pCPwd" class="tishiSun"></p>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-8 col-sm-offset-2 tishiParent">
							<input type="text" class="form-control" id="phone" name="phone"
								   placeholder="手机号码" />
							<p id="pPhone" class="tishiSun"></p>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-8 col-sm-offset-2 tishiParent">
							<input type="text" class="form-control" id="email" name="email" placeholder="邮箱" />
							<p id="pemail" class="tishiSun"></p>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer col-sm-8 ">
				<div style="margin-top:10px">
					<button type="button" id="registe"
							class="layui-btn layui-btn-primary layui-border-blue">注册</button>
					<button type="button" id="resetInfo"
							class="layui-btn layui-btn-primary layui-border-blue">重置</button>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
